<template>
  <div class="app-container">
    <el-dialog title="设置标签" :visible.sync="open" width="50%" append-to-body :close-on-click-modal='false'>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="推送类型" porp="categoryIds">
           <el-checkbox-group v-model="form.categoryIds">
            <el-checkbox v-for="item in userCategoryOptions" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { loadUserGategory } from "@/api/system/userGategory";

export default {
  data() {
    return {
      userCategoryOptions:[],
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        categoryIds: []
      },
    };
  },
  created() {
    loadUserGategory().then(response => {
      this.userCategoryOptions = response.data;
    });
  },
  methods: {
    init(){
      this.open = true
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        categoryIds: [],
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            // updateCatUserLog(this.form).then(response => {
            //   if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
              // }
            // });
        }
      });
    },
  }
};
</script>